import {
  PerspectiveCamera,
  Scene,
  WebGLRenderer,
  Mesh,
  BoxBufferGeometry,
  MeshBasicMaterial,
  TextureLoader,
  AxesHelper,
  Color,
  AmbientLight,
  DirectionalLight,
  Vector3,
  GridHelper,
  ExtrudeBufferGeometry,
  Vector2,
  ShapePath,
  Group,
  Path,
  Shape,
  ShapeBufferGeometry,
  DoubleSide,
  PlaneBufferGeometry,
  MeshPhongMaterial,
} from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { RepeatWrapping } from 'three/src/constants';

let camera: PerspectiveCamera, scene: Scene, renderer: WebGLRenderer;
let mesh: Mesh;
let group: Group;

init();
animate();

function init() {
  camera = new PerspectiveCamera(
    70,
    window.innerWidth / window.innerHeight,
    1,
    1000
  );
  camera.position.set(15, 15, 15);

  scene = new Scene();
  scene.background = new Color("#b0b0b0");

  let ambientLight = new AmbientLight('#fff', .5)
  scene.add(ambientLight);
  let directionLight = new DirectionalLight('#fff', .8);
  scene.add(directionLight);

  group = new Group();
  scene.add(group);

  let texture1 = new TextureLoader().load(require('../static/textures/lightmap/rocks.jpg').default)
  texture1.wrapS = RepeatWrapping;
  texture1.wrapT = RepeatWrapping;
  texture1.repeat = new Vector2(2, 2)
  let texture2 = new TextureLoader().load(require('../static/textures/lightmap/stone.jpg').default)

  let planeGeometry = new PlaneBufferGeometry(100, 100);
  let planeMaterial = new MeshBasicMaterial({
    map: texture2,
    color: '#C4B59E',
    side: DoubleSide
  })
  let planeMesh = new Mesh(planeGeometry, planeMaterial);
  planeMesh.rotateX(-Math.PI / 2);
  group.add(planeMesh);

  let boxGeometry1 = new BoxBufferGeometry(10, 10, 10);
  let boxMaterial = new MeshPhongMaterial({
    map: texture1,
    color: '#A87254',
    bumpMap: texture1
  })
  let boxMesh1 = new Mesh(boxGeometry1, boxMaterial)
  boxMesh1.position.set(0, 5, 0);

  let boxGeometry2 = new BoxBufferGeometry(5, 5, 5);
  let boxMaterial2 = new MeshBasicMaterial({
      map: texture1,
      color: '#A2503F'
  })
  let boxMesh2 = new Mesh(boxGeometry2, boxMaterial2)
  boxMesh2.position.set(15, 2.5, 15);

  group.add(boxMesh1, boxMesh2)

  renderer = new WebGLRenderer({ antialias: true });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  const controls = new OrbitControls(camera, renderer.domElement);
  // renderer.render(scene, camera);
}

function animate() {
  requestAnimationFrame(animate);

  renderer.render(scene, camera);
}
